<template>
  <view class="cart">
    <view class="goods-list">

      <view class="goods-show"
            v-for="(item,index) in cartList"
            :key="item.goods_id">
        <view class="goods-chk">
          <u-checkbox shape="circle"
                      @change="handleChange(index)"
                      :value="item.isSelected" />
        </view>
        <view class="goods-image">
          <u-image width="191rpx"
                   :src="item.goods_small_logo||''"
                   height="191rpx"></u-image>
        </view>
        <view class="goods-content">
          <view class="goods-name u-line-2">{{item.goods_name}}</view>
          <view class="goods-price-num">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num">
              <text class="num-btn"
                    @click="reduceFn(index)">-</text>
              <text class="num u-m-15"> {{item.nums}}</text>
              <text class="num-btn"
                    @click="addFn(index)">+</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Settlement>
      <template v-slot:left>
        <view class="left">
          <u-checkbox :value="allSelected"
                      @change="handleAllChange"
                      shape="circle">全选</u-checkbox>
          <view class="total">合计：<text class="sign">￥</text><text>{{totalPrices}}</text></view>
        </view>
      </template>
      <template v-slot:right>
        <navigator url="/pages/pay/pay"
                   :class="['goPay', goodsNum?'':'disabled']">去支付({{goodsNum}})</navigator>
      </template>
    </Settlement>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    //   获取vuex仓库里面的数据
    ...mapState({ cartList: (state) => state.cart.cartList }),
    // 获取全选框的数据
    allSelected() {
      return (
        this.cartList.length && this.cartList.every((item) => item.isSelected)
      )
    },
    // 计算选中购买的数量
    goodsNum() {
      const nums = this.cartList.filter((item) => item.isSelected)
      return nums.reduce((count, item) => (count += item.nums), 0)
    },
    // 计算购买的商品总价
    totalPrices() {
      const nums = this.cartList.filter((item) => item.isSelected)
      return nums.reduce(
        (count, item) => (count += item.nums * item.goods_price),
        0
      )
    },
  },
  methods: {
    //   商品全选
    async handleAllChange() {
      const allSelected = !this.allSelected
      await this.$store.commit('cart/isAllSelected', allSelected)
    },
    //   商品单选
    async handleChange(index) {
      await this.$store.commit('cart/isSelected', index)
    },
    //   商品数量减少
    async reduceFn(index) {
      if (this.cartList[index].nums <= 1) {
        const [err, result] = await uni.showModal({
          content: '您是否确定要删除该商品!',
          showCancel: true,
          cancelText: '取消',
          cancelColor: '#000000',
          confirmText: '确定',
          confirmColor: '#3CC51F',
        })
        if (result.confirm) await this.$store.commit('cart/reduceNum', index)
      } else {
        await this.$store.commit('cart/reduceNum', index)
      }
    },
    //   商品数量增加
    async addFn(index) {
      await this.$store.commit('cart/addNum', index)
    },
  },
}
</script>


<style lang="scss" scoped>
.cart {
  height: 100vh;
  .goods-list {
    padding: 27rpx 27rpx 111rpx;
    .goods-show {
      display: flex;
      height: 209rpx;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-bottom: 1px solid #999;
      u-checkbox {
        flex: 1;
      }
      .goods-image {
        flex: 3;
      }
      .goods-content {
        flex: 6;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-around;
        .goods-price-num {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $themeColor;
          }
          .goods-num {
            .num-btn {
              display: inline-block;
              width: 32rpx;
              line-height: 32rpx;
              text-align: center;
              border-radius: 50%;
              border: 1px solid #ccc;
            }
          }
        }
      }
    }
  }
}
.disabled {
  color: black !important;
  background-color: #ccc !important;
}
.left {
  display: flex;
  font-size: 30rpx;
  align-items: center;
  font-weight: 700;
  text {
    color: $themeColor;
  }
  .sign {
    font-size: 24rpx;
  }
}
.goPay {
  width: 150rpx;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 52rpx;
  border-radius: 52rpx;
  background-color: $themeColor;
}
</style>